<template>
  <div class="home">
    home
    <!-- <router-link to="/detail?id=1001">跳转到detail页面</router-link> -->
     <!-- 命名路由跳转 -->
    <!-- <router-link :to="{ name: 'Detail', query: { id: 123 }}">跳转到detail页面</router-link> -->
    <!-- 点击事件跳转 -->
    <!-- <button @click="handleClick">跳转detail</button> -->
    <router-link to="/detail/1001">跳转到detail页面</router-link>
    <div @click="handleChange(index,item.path)" 
    :class="[active==index?'current':'']"
    v-for="(item,index) of tabs" :key="index">{{item.name}}</div>
    <div v-show="active==0">正在热映</div>
    <div v-show="active==1">即将上映</div>
    <Loading></Loading>
    <div class="test"></div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      tabs:[{name:'正在热映',path:'/films/nowPlaying'},
            {name:'即将上映',path:'/films/comingSoon'}],
      active:0
    }
  },
  mounted() {
    console.log(this.$route.query);
  },
  methods:{
    handleClick(){
      this.$router.push('/detail?id=1001')
    },
    handleChange(index,path){
      this.active = index
      console.log(path);
      //this.$router.push(path)
    }
  }
}
</script>

<style scoped>
.current{
  color: red;
}
.test{
  width: 5rem;
  height: 30px;
  background-color: blue;
}
</style>
